Making a dropdown with DOM scripting

Share this article

Aaron Gustafson is putting together a series of articles on how to make select elements stylable. In essence, what his work does is take the select out of the DOM and replace it with a ul, and then add script and CSS to make that ul work like a dropdown list. The advantage this gives is clear to everyone who’s ever complained about how selects aren’t stylable! The series has only just started, and there are a few concerns — the new element can’t be tabbed to, and doesn’t respond to keyboard events — but Aaron promises that part 2 will cover accessibility issues.

The script uses similar techniques to the Suckerfish dropdowns, applying “hover” and “selected” classes to various parts of the ul to provide hooks for styling (since IE doesn’t support :hover on things that aren’t links). This should be a useful technique to watch!

Stuart Langridge and Tony Steidler-DennisonStuart Langridge and Tony Steidler-Dennison
View Author

Stuart Langridge has been a Linux user since 1997, and is quite possibly the only person in the world to have a BSc in Computer Science and Philosophy. He’s also one-quarter of the team at LugRadio, the world's premiere Free and Open Source Software radio show. Tony Steidler-Dennison is a Systems Engineer with Rockwell Collins, Inc., designing avionics and cabin data servers for commercial airliners. He’s also the host of The Roadhouse Podcast, "the finest blues you've never heard."

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week